﻿<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		#LoutiNav{
			position: fixed;
			top: 25%;
			left: 40px;
			width: 30px;
			border: 1px solid;			
		}
		#LoutiNav ul li{
			position: relative;
			width: 30px;
			height: 30px;
			list-style: none;
			text-align: center;
			line-height: 30px;
			font-size: 12px;
			cursor: pointer;
			border-bottom: 1px dotted #AAAAAA;
		}
		#LoutiNav ul li.last{
			background: darkred;
			color: white;
			border-bottom: none;
		}
		#LoutiNav ul li span{
			display: none;
			width: 30px;
			height: 30px;
			position: absolute;
			top: 0;
			left: 0;
			color: red;
		}
		#LoutiNav ul li:hover span{
			display: block;
			background: darkred;
			color: white;
		}
		#LoutiNav ul li span.active{
			display: block;
			background: white;
			color: red;
		}
		#LoutiNav ul li:hover span.active{
			display: block;
			background: darkred;
			color: white;
		}
		#header,#main,#footer{
			margin: auto;
			width: 1000px;
			text-align: center;
			font-size: 40px;
			font-weight: bold;
			line-height: 500px;
		}
		#main div{
			height: 700px;
			font-size: 50px;
			color: honeydew;
			line-height: 700px;
		}
		#header{
			height: 500px;
			background: #fff;
			font-size: 300px;
			color: red;

		}
		#footer{
			height: 500px;
			background: darkcyan;
		}
		
	</style>
	<body>
		<div id="LoutiNav">
			<ul>
				<li>1F <span>服饰</span></li>
				<li>2F <span>美妆</span></li>
				<li>3F <span>手机</span></li>
				<li>4F <span>家电</span></li>
				<li>5F <span>数码</span></li>
				<li>6F <span>运动</span></li>
				<li>7F <span>居家</span></li>
				<li>8F <span>母婴</span></li>
				<li>9F <span>食品</span></li>
				<li>10F <span>图书</span></li>
				<li>11F <span>服务</span></li>
				<li class="last">Top</li>
			</ul>
		</div>
		
		<!--楼层内容的开始-->
		<div id="header">汪</div>
		<div id="main">
			<div class="Louti" style="background: #cc0033;">张超良</div>
			<div class="Louti" style="background: #999933;">美妆</div>
			<div class="Louti" style="background: #ccff33;">手机</div>
			<div class="Louti" style="background: #006633;">家电</div>
			<div class="Louti" style="background: #cc0033;">数码</div>
			<div class="Louti" style="background: #6666cc;">运动</div>
			<div class="Louti" style="background: #ff6600;">居家</div>
			<div class="Louti" style="background: #3333ff;">母婴</div>
			<div class="Louti" style="background: #ff00cc;">食品</div>
			<div class="Louti" style="background: #669900;">图书</div>
			<div class="Louti" style="background: #ff66cc;">服务</div>
		</div>
		<div id="footer">尾部</div>
		
	</body>
	<script src="js/jquery-3.1.1.js" ></script>
	<script type="text/javascript">
		var isclick=false;
		$("#LoutiNav ul li:not(:last)").click(function () {
			isclick=true;
			//计算top值
			var _top=$(".Louti").eq($(this).index()).offset().top;
//			console.log(_top);
			//滚动页面
			$(this).find("span").addClass("active").end().siblings().find("span").removeClass("active");
			$("html,body").animate({scrollTop: _top},2000,function () {
				var isclick=false;
			})					
		})
		
		$("#LoutiNav .last").click(function(){
			$("html,body").animate({scrollTop: 0},500);
		});
		
		$(window).scroll(function () {
			if (!isclick) {
				var height=$(window).scrollTop();
//				console.log(height)
				$("#main .Louti").each(function () {
					console.log($(this).offset().top)
					console.log($(this).outerHeight()/2)
					if (height>=($(this).offset().top-$(this).outerHeight()/2)) {
						var $li=$("#LoutiNav ul li").eq($(this).index());
						$li.children("span").addClass("active")
						$li.siblings().find("span").removeClass("active");
					}
				})
				
			}
		})
		
		
		
		
	</script>
</html>
